<template>
  <div class="quiz-challenge">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>🎯 知识问答大赛</h1>
        <p>各行业通用知识竞赛，挑战你的知识储备</p>
      </div>
      <div class="game-stats">
        <el-statistic title="答对题目" :value="gameStats.correctAnswers" />
        <el-statistic title="正确率" :value="gameStats.accuracy" suffix="%" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 模式选择 -->
    <div v-if="!gameStarted" class="mode-selection">
      <h2>选择挑战模式</h2>
      <div class="modes-grid">
        <div 
          v-for="mode in modes" 
          :key="mode.id"
          class="mode-card"
          @click="selectMode(mode)"
        >
          <div class="mode-icon" :style="{ background: mode.color }">
            {{ mode.emoji }}
          </div>
          <h3>{{ mode.name }}</h3>
          <p>{{ mode.description }}</p>
          <div class="mode-info">
            <el-tag :type="mode.difficultyType" size="small">{{ mode.difficulty }}</el-tag>
            <span>{{ mode.questionCount }} 题</span>
            <span>💰 {{ mode.points }}积分</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 答题界面 -->
    <div v-else class="quiz-interface">
      <div class="quiz-progress">
        <div class="progress-info">
          <span>第 {{ currentQuestionIndex + 1 }} / {{ currentQuestions.length }} 题</span>
          <el-progress 
            :percentage="Math.round(((currentQuestionIndex + 1) / currentQuestions.length) * 100)" 
            :show-text="false"
          />
        </div>
        <div class="quiz-stats">
          <span class="correct-count">
            <el-icon><CircleCheck /></el-icon>
            正确: {{ correctCount }}
          </span>
          <span class="wrong-count">
            <el-icon><CircleClose /></el-icon>
            错误: {{ wrongCount }}
          </span>
          <span class="score">
            <el-icon><Trophy /></el-icon>
            得分: {{ currentScore }}
          </span>
        </div>
      </div>

      <div class="question-card">
        <div class="question-header">
          <el-tag :type="getCurrentDifficultyType()" size="large">
            {{ currentQuestion.difficulty }}
          </el-tag>
          <el-tag v-if="currentQuestion.category" type="info" size="large">
            {{ currentQuestion.category }}
          </el-tag>
        </div>

        <h2 class="question-text">{{ currentQuestion.question }}</h2>

        <div class="options-list">
          <div 
            v-for="(option, index) in currentQuestion.options" 
            :key="index"
            class="option-item"
            :class="getOptionClass(index)"
            @click="!answered && selectAnswer(index)"
          >
            <div class="option-label">{{ String.fromCharCode(65 + index) }}</div>
            <div class="option-text">{{ option }}</div>
            <el-icon v-if="answered && index === currentQuestion.correctAnswer" class="correct-icon">
              <CircleCheck />
            </el-icon>
            <el-icon v-if="answered && index === selectedAnswer && index !== currentQuestion.correctAnswer" class="wrong-icon">
              <CircleClose />
            </el-icon>
          </div>
        </div>

        <div v-if="answered" class="answer-explanation">
          <el-alert
            :title="selectedAnswer === currentQuestion.correctAnswer ? '✅ 回答正确！' : '❌ 回答错误'"
            :type="selectedAnswer === currentQuestion.correctAnswer ? 'success' : 'error'"
            :description="currentQuestion.explanation"
            :closable="false"
            show-icon
          />
        </div>

        <div class="question-actions">
          <el-button 
            v-if="!answered"
            type="primary" 
            size="large"
            :disabled="selectedAnswer === null"
            @click="submitAnswer"
          >
            提交答案
          </el-button>
          <el-button 
            v-else
            type="primary" 
            size="large"
            @click="nextQuestion"
          >
            {{ currentQuestionIndex < currentQuestions.length - 1 ? '下一题' : '查看结果' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 结果对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="挑战完成"
      width="700px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="result-summary">
        <div class="result-score">
          <div class="score-circle">
            <el-progress 
              type="circle" 
              :percentage="Math.round((correctCount / currentQuestions.length) * 100)"
              :width="150"
              :color="getScoreColor(Math.round((correctCount / currentQuestions.length) * 100))"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">正确率</span>
              </template>
            </el-progress>
          </div>
          <div class="score-details">
            <h2>最终得分: {{ currentScore }}</h2>
            <el-rate 
              v-model="performanceRating" 
              disabled 
              show-score
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            />
          </div>
        </div>

        <div class="result-stats">
          <div class="result-stat-item">
            <div class="stat-icon correct">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-label">答对题目</span>
              <span class="stat-value">{{ correctCount }}</span>
            </div>
          </div>
          <div class="result-stat-item">
            <div class="stat-icon wrong">
              <el-icon><CircleClose /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-label">答错题目</span>
              <span class="stat-value">{{ wrongCount }}</span>
            </div>
          </div>
          <div class="result-stat-item">
            <div class="stat-icon trophy">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-label">获得积分</span>
              <span class="stat-value">{{ earnedPoints }}</span>
            </div>
          </div>
        </div>

        <div class="performance-feedback">
          <el-alert
            :title="getPerformanceFeedback().title"
            :type="getPerformanceFeedback().type"
            :description="getPerformanceFeedback().description"
            :closable="false"
            show-icon
          />
        </div>
      </div>

      <template #footer>
        <el-button @click="reviewAnswers">查看解析</el-button>
        <el-button @click="restartGame">再来一次</el-button>
        <el-button type="primary" @click="goBack">返回游戏中心</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, CircleCheck, CircleClose, Trophy
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  correctAnswers: 145,
  accuracy: 87,
  points: 3650
})

// 游戏模式
const modes = ref([
  {
    id: 1,
    name: '快速挑战',
    emoji: '⚡',
    description: '10道题快速挑战，适合碎片时间',
    difficulty: '简单',
    difficultyType: 'success',
    questionCount: 10,
    points: 100,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    id: 2,
    name: '标准模式',
    emoji: '🎯',
    description: '20道题标准挑战，全面考察知识',
    difficulty: '中等',
    difficultyType: 'warning',
    questionCount: 20,
    points: 200,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    id: 3,
    name: '专家模式',
    emoji: '🏆',
    description: '30道题专家级挑战，挑战极限',
    difficulty: '困难',
    difficultyType: 'danger',
    questionCount: 30,
    points: 350,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  }
])

// 题库
const questionBank = [
  // IT行业
  {
    category: 'IT技术',
    difficulty: '简单',
    question: 'HTML的全称是什么？',
    options: [
      'Hyper Text Markup Language',
      'High Tech Modern Language',
      'Home Tool Markup Language',
      'Hyperlinks and Text Markup Language'
    ],
    correctAnswer: 0,
    explanation: 'HTML代表超文本标记语言（Hyper Text Markup Language），是构建网页的标准标记语言。'
  },
  {
    category: 'IT技术',
    difficulty: '中等',
    question: '以下哪个不是JavaScript的数据类型？',
    options: ['String', 'Boolean', 'Float', 'Undefined'],
    correctAnswer: 2,
    explanation: 'JavaScript中没有Float类型，数字类型统一使用Number表示，可以是整数或浮点数。'
  },
  {
    category: 'IT技术',
    difficulty: '困难',
    question: '在软件开发中，SOLID原则的"S"代表什么？',
    options: [
      'Simple Responsibility',
      'Single Responsibility',
      'System Responsibility',
      'Secure Responsibility'
    ],
    correctAnswer: 1,
    explanation: 'SOLID中的S代表单一职责原则（Single Responsibility Principle），即一个类应该只有一个引起它变化的原因。'
  },
  
  // 零售行业
  {
    category: '零售管理',
    difficulty: '简单',
    question: '客户关系管理的英文缩写是什么？',
    options: ['CRM', 'CSM', 'CRP', 'CRS'],
    correctAnswer: 0,
    explanation: 'CRM是Customer Relationship Management的缩写，即客户关系管理。'
  },
  {
    category: '零售管理',
    difficulty: '中等',
    question: '商品周转率的计算公式是？',
    options: [
      '销售额 ÷ 平均库存额',
      '销售成本 ÷ 平均库存成本',
      '销售额 × 平均库存额',
      '利润 ÷ 销售额'
    ],
    correctAnswer: 1,
    explanation: '商品周转率 = 销售成本 ÷ 平均库存成本，用于衡量库存管理效率。'
  },
  
  // 制造业
  {
    category: '制造管理',
    difficulty: '简单',
    question: '5S管理中的第一个"S"是什么？',
    options: ['整理（Seiri）', '整顿（Seiton）', '清扫（Seiso）', '清洁（Seiketsu）'],
    correctAnswer: 0,
    explanation: '5S管理的第一个S是整理（Seiri），意思是区分要与不要的东西，现场只保留必需的物品。'
  },
  {
    category: '制造管理',
    difficulty: '中等',
    question: 'JIT生产方式的核心思想是什么？',
    options: [
      '大批量生产',
      '准时生产，消除浪费',
      '提前生产，增加库存',
      '延迟生产，减少成本'
    ],
    correctAnswer: 1,
    explanation: 'JIT（Just In Time）的核心是准时生产，在需要的时候生产需要的数量，消除一切浪费。'
  },
  
  // 餐饮行业
  {
    category: '餐饮管理',
    difficulty: '简单',
    question: '食品安全中，冷藏温度应该控制在多少度？',
    options: ['0-4℃', '5-10℃', '10-15℃', '-18℃以下'],
    correctAnswer: 0,
    explanation: '冷藏温度应控制在0-4℃，可以有效抑制细菌生长，保持食品新鲜。'
  },
  {
    category: '餐饮管理',
    difficulty: '中等',
    question: '餐饮业的毛利率计算公式是？',
    options: [
      '(销售额 - 成本) ÷ 销售额 × 100%',
      '销售额 ÷ 成本 × 100%',
      '成本 ÷ 销售额 × 100%',
      '(销售额 - 成本) ÷ 成本 × 100%'
    ],
    correctAnswer: 0,
    explanation: '毛利率 = (销售额 - 成本) ÷ 销售额 × 100%，反映餐饮企业的盈利能力。'
  },
  
  // 通用知识
  {
    category: '职场通用',
    difficulty: '简单',
    question: 'PDCA循环中的"P"代表什么？',
    options: ['Plan（计划）', 'Prepare（准备）', 'Process（流程）', 'Product（产品）'],
    correctAnswer: 0,
    explanation: 'PDCA循环中P代表Plan（计划），D代表Do（执行），C代表Check（检查），A代表Act（处理）。'
  },
  {
    category: '职场通用',
    difficulty: '中等',
    question: '有效沟通的"5W2H"原则中，不包括以下哪一项？',
    options: ['What（什么）', 'Why（为什么）', 'Where（哪里）', 'Which（哪个）'],
    correctAnswer: 3,
    explanation: '5W2H包括：What（什么）、Why（为什么）、Who（谁）、When（何时）、Where（哪里）、How（怎么做）、How much（多少钱）。不包括Which。'
  },
  {
    category: '管理知识',
    difficulty: '简单',
    question: '马斯洛需求层次理论中，最高层次的需求是什么？',
    options: ['安全需求', '社交需求', '尊重需求', '自我实现需求'],
    correctAnswer: 3,
    explanation: '马斯洛需求层次理论从低到高依次是：生理需求、安全需求、社交需求、尊重需求、自我实现需求。'
  },
  {
    category: '财务知识',
    difficulty: '中等',
    question: '企业的流动比率计算公式是？',
    options: [
      '流动资产 ÷ 流动负债',
      '流动负债 ÷ 流动资产',
      '总资产 ÷ 总负债',
      '净资产 ÷ 总资产'
    ],
    correctAnswer: 0,
    explanation: '流动比率 = 流动资产 ÷ 流动负债，用于衡量企业短期偿债能力。'
  },
  {
    category: '市场营销',
    difficulty: '简单',
    question: '营销4P理论不包括以下哪一项？',
    options: ['Product（产品）', 'Price（价格）', 'People（人员）', 'Place（渠道）'],
    correctAnswer: 2,
    explanation: '传统营销4P包括：Product（产品）、Price（价格）、Place（渠道）、Promotion（促销）。People属于7P理论的扩展。'
  },
  {
    category: '项目管理',
    difficulty: '中等',
    question: '敏捷开发中的Sprint通常持续多长时间？',
    options: ['1周', '2-4周', '2个月', '半年'],
    correctAnswer: 1,
    explanation: 'Sprint是Scrum敏捷开发中的迭代周期，通常持续2-4周，最常见的是2周。'
  }
]

// 游戏状态
const gameStarted = ref(false)
const currentMode = ref(null)
const currentQuestions = ref([])
const currentQuestionIndex = ref(0)
const selectedAnswer = ref(null)
const answered = ref(false)
const correctCount = ref(0)
const wrongCount = ref(0)
const currentScore = ref(0)
const showResultDialog = ref(false)
const performanceRating = ref(3)
const earnedPoints = ref(0)

// 当前题目
const currentQuestion = computed(() => {
  return currentQuestions.value[currentQuestionIndex.value] || {}
})

// 选择模式
function selectMode(mode) {
  currentMode.value = mode
  
  // 随机选择题目
  const shuffled = [...questionBank].sort(() => Math.random() - 0.5)
  currentQuestions.value = shuffled.slice(0, mode.questionCount)
  
  // 重置状态
  currentQuestionIndex.value = 0
  selectedAnswer.value = null
  answered.value = false
  correctCount.value = 0
  wrongCount.value = 0
  currentScore.value = 0
  
  gameStarted.value = true
  ElMessage.success(`${mode.name} 开始！加油！`)
}

// 获取难度类型
function getCurrentDifficultyType() {
  const map = { '简单': 'success', '中等': 'warning', '困难': 'danger' }
  return map[currentQuestion.value.difficulty] || 'info'
}

// 选择答案
function selectAnswer(index) {
  selectedAnswer.value = index
}

// 提交答案
function submitAnswer() {
  if (selectedAnswer.value === null) {
    ElMessage.warning('请选择一个答案')
    return
  }
  
  answered.value = true
  
  if (selectedAnswer.value === currentQuestion.value.correctAnswer) {
    correctCount.value++
    
    // 根据难度给分
    let points = 10
    if (currentQuestion.value.difficulty === '中等') points = 15
    if (currentQuestion.value.difficulty === '困难') points = 20
    
    currentScore.value += points
    ElMessage.success(`回答正确！+${points}分`)
  } else {
    wrongCount.value++
    ElMessage.error('回答错误，请查看解析')
  }
}

// 下一题
function nextQuestion() {
  if (currentQuestionIndex.value < currentQuestions.value.length - 1) {
    currentQuestionIndex.value++
    selectedAnswer.value = null
    answered.value = false
  } else {
    // 游戏结束
    endGame()
  }
}

// 结束游戏
function endGame() {
  earnedPoints.value = currentScore.value
  const accuracy = Math.round((correctCount.value / currentQuestions.value.length) * 100)
  
  // 计算星级
  if (accuracy >= 90) {
    performanceRating.value = 5
  } else if (accuracy >= 80) {
    performanceRating.value = 4
  } else if (accuracy >= 70) {
    performanceRating.value = 3
  } else if (accuracy >= 60) {
    performanceRating.value = 2
  } else {
    performanceRating.value = 1
  }
  
  showResultDialog.value = true
  
  // 更新总体统计
  gameStats.value.correctAnswers += correctCount.value
  gameStats.value.points += earnedPoints.value
  const totalQuestions = gameStats.value.correctAnswers + wrongCount.value
  gameStats.value.accuracy = Math.round((gameStats.value.correctAnswers / totalQuestions) * 100)
}

// 获取选项样式
function getOptionClass(index) {
  if (!answered.value) {
    return selectedAnswer.value === index ? 'selected' : ''
  }
  
  if (index === currentQuestion.value.correctAnswer) {
    return 'correct'
  }
  
  if (index === selectedAnswer.value && index !== currentQuestion.value.correctAnswer) {
    return 'wrong'
  }
  
  return 'disabled'
}

// 获取分数颜色
function getScoreColor(percentage) {
  if (percentage >= 90) return '#67c23a'
  if (percentage >= 80) return '#409eff'
  if (percentage >= 70) return '#e6a23c'
  if (percentage >= 60) return '#f56c6c'
  return '#909399'
}

// 获取表现反馈
function getPerformanceFeedback() {
  const accuracy = Math.round((correctCount.value / currentQuestions.value.length) * 100)
  
  if (accuracy >= 90) {
    return {
      title: '🏆 完美表现！',
      description: '你对各领域知识掌握得非常出色，继续保持！',
      type: 'success'
    }
  } else if (accuracy >= 80) {
    return {
      title: '👍 表现优秀！',
      description: '知识掌握得很好，稍加巩固就能更上一层楼！',
      type: 'success'
    }
  } else if (accuracy >= 70) {
    return {
      title: '😊 表现不错！',
      description: '基础知识扎实，继续学习提升吧！',
      type: 'warning'
    }
  } else if (accuracy >= 60) {
    return {
      title: '💪 还需努力！',
      description: '还有提升空间，建议多复习相关知识点。',
      type: 'warning'
    }
  } else {
    return {
      title: '📚 继续加油！',
      description: '知识储备还需加强，不要气馁，多学习多练习！',
      type: 'info'
    }
  }
}

// 查看解析
function reviewAnswers() {
  ElMessage.info('题目解析功能开发中...')
}

// 重新开始
function restartGame() {
  showResultDialog.value = false
  gameStarted.value = false
}

// 返回
function goBack() {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.quiz-challenge {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  border-radius: 12px;
  color: #1e3a8a;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #1e3a8a;
}

.game-title p {
  margin: 0;
  color: #3b82f6;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: #3b82f6;
}

.game-stats :deep(.el-statistic__content) {
  color: #1e3a8a;
  font-weight: bold;
}

/* 模式选择 */
.mode-selection {
  text-align: center;
  padding: 40px;
}

.mode-selection h2 {
  margin-bottom: 40px;
  font-size: 24px;
  color: #303133;
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.mode-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.mode-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 40px;
}

.mode-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
}

.mode-card p {
  margin: 0 0 20px 0;
  color: #606266;
  line-height: 1.6;
}

.mode-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #909399;
  font-size: 14px;
}

/* 答题界面 */
.quiz-interface {
  max-width: 900px;
  margin: 0 auto;
}

.quiz-progress {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-info {
  margin-bottom: 16px;
}

.progress-info span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.quiz-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
}

.quiz-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.correct-count {
  color: #67c23a;
}

.wrong-count {
  color: #f56c6c;
}

.score {
  color: #409eff;
}

/* 题目卡片 */
.question-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.question-header {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.question-text {
  margin: 0 0 32px 0;
  font-size: 22px;
  color: #303133;
  line-height: 1.6;
}

/* 选项列表 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.option-item:hover:not(.disabled) {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-item.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-item.correct {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-item.wrong {
  border-color: #f56c6c;
  background: #fef0f0;
}

.option-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.option-label {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #606266;
  flex-shrink: 0;
}

.option-item.selected .option-label {
  background: #409eff;
  color: white;
}

.option-item.correct .option-label {
  background: #67c23a;
  color: white;
}

.option-item.wrong .option-label {
  background: #f56c6c;
  color: white;
}

.option-text {
  flex: 1;
  font-size: 16px;
  color: #303133;
  line-height: 1.6;
}

.correct-icon,
.wrong-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.correct-icon {
  color: #67c23a;
}

.wrong-icon {
  color: #f56c6c;
}

/* 答案解析 */
.answer-explanation {
  margin-bottom: 24px;
}

.answer-explanation :deep(.el-alert) {
  border-radius: 8px;
}

/* 操作按钮 */
.question-actions {
  display: flex;
  justify-content: center;
}

/* 结果对话框 */
.result-summary {
  padding: 20px;
}

.result-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 2px solid #f0f2f5;
}

.score-circle {
  flex-shrink: 0;
}

.percentage-value {
  font-size: 32px;
  font-weight: bold;
  display: block;
}

.percentage-label {
  font-size: 14px;
  color: #909399;
  display: block;
  margin-top: 4px;
}

.score-details {
  text-align: center;
}

.score-details h2 {
  margin: 0 0 16px 0;
  font-size: 28px;
  color: #303133;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.result-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.stat-icon.wrong {
  background: #fef0f0;
  color: #f56c6c;
}

.stat-icon.trophy {
  background: #fff7e6;
  color: #e6a23c;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.performance-feedback {
  margin-top: 24px;
}
</style>

